<template>
  <div class="list-page">
    <a-spin :spinning="loading">
      <div class="top-active">
        <div class="top-search">
          <a-input-search
            placeholder="请输入内容"
            enter-button="搜索"
            @search="search"
          />
        </div>
        <div class="btn">
          <a-button @click="addVisible = true" icon="upload" type="primary"
            >批量上传</a-button
          >
        </div>
      </div>
      <div class="table-box">
        <a-table
          :columns="columns"
          :data-source="source"
          bordered
          :rowKey="(record, index) => index"
        >
          <a slot="view" href="http://dark.childstore.cn/annotations.html"
            >详情</a
          >
        </a-table>
      </div>
    </a-spin>
    <a-modal
      v-model="addVisible"
      title="批量上传"
      :width="800"
      :maskClosable="false"
      :footer="null"
      class="yp-modal"
    >
      <div v-if="addStep === 1" class="upload-box">
        <input
          type="file"
          accept="application/zip"
          multiple
          @change="fileChange"
        />
        <div class="tips">
          <a-icon type="upload" style="font-size: 28px; margin-bottom: 5px" />
          <p>拖拽文件到此或点击上传</p>
          <p><span>允许文件类型：.zip</span></p>
        </div>
      </div>
      <div v-else class="file-view">
        <div class="files-list">
          <div class="file">
            <img src="/pic/1.jpg" />
            <div class="name">1.jpg</div>
          </div>
          <div class="file">
            <img src="/pic/1.jpg" />
            <div class="name">2.jpg</div>
          </div>
          <div class="file">
            <img src="/pic/1.jpg" />
            <div class="name">1.jpg</div>
          </div>
          <div class="file">
            <img src="/pic/1.jpg" />
            <div class="name">2.jpg</div>
          </div>
        </div>
        <div class="file-info">
          <div class="des-box">
            <div class="info">
              <div class="lb">题名</div>
              <div class="val">阿房宮賦印譜</div>
            </div>
            <div class="info">
              <div class="lb">作者</div>
              <div class="val">陸宗暉</div>
            </div>
            <div class="info">
              <div class="lb">年份</div>
              <div class="val">1929</div>
            </div>
            <div class="info">
              <div class="lb">版本</div>
              <div class="val">鈐印本</div>
            </div>
            <div class="info">
              <div class="lb">资源类型</div>
              <div class="val">印谱</div>
            </div>
            <div class="info">
              <div class="lb">资源来源</div>
              <div class="val">松蔭軒藏印譜文獻</div>
            </div>
            <div class="info">
              <div class="lb">馆藏记录号</div>
              <div class="val">002036009</div>
            </div>
            <div class="info">
              <div class="lb">印谱简介</div>
              <div class="val">阿房宮賦印譜简单介绍阿房宮賦印譜简单介绍</div>
            </div>
          </div>
          <a-button
            type="primary"
            icon="upload"
            style="margin: 0 auto; display: block"
            >上传</a-button
          >
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      loading: false,
      addVisible: false,
      addStep: 1,
      columns: [
        {
          title: "印谱名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "作者",
          dataIndex: "author",
          key: "author",
        },
        {
          title: "年份",
          dataIndex: "year",
          key: "year",
        },
        {
          title: "版本",
          dataIndex: "vision",
          key: "vision",
        },
        {
          title: "资源来源",
          dataIndex: "source",
          key: "source",
        },
        {
          title: "印谱简介",
          dataIndex: "des",
          key: "des",
        },
        {
          title: "展示",
          dataIndex: "view",
          key: "view",
          scopedSlots: { customRender: "view" },
        },
      ],
      source: [
        {
          id: 12430,
          name: "名称",
          des: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          author: "张三",
          year: "1940",
          vision: "鈐印本",
          source: "松蔭軒藏印譜文獻",
          view: "/pic/1.jpg",
        },
        {
          id: 12431,
          name: "名称",
          des: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          author: "张三",
          year: "1940",
          vision: "鈐印本",
          source: "松蔭軒藏印譜文獻",
          view: "/pic/1.jpg",
        },
        {
          id: 12432,
          name: "名称",
          des: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          author: "张三",
          year: "1940",
          vision: "鈐印本",
          source: "松蔭軒藏印譜文獻",
          view: "/pic/1.jpg",
        },
        {
          id: 12433,
          name: "名称",
          des: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          author: "张三",
          year: "1940",
          vision: "鈐印本",
          source: "松蔭軒藏印譜文獻",
          view: "/pic/1.jpg",
        },
        {
          id: 12434,
          name: "名称",
          des: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          author: "张三",
          year: "1940",
          vision: "鈐印本",
          source: "松蔭軒藏印譜文獻",
          view: "/pic/1.jpg",
        },
        {
          id: 12435,
          name: "名称",
          des: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          author: "张三",
          year: "1940",
          vision: "鈐印本",
          source: "松蔭軒藏印譜文獻",
          view: "/pic/1.jpg",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log(111);
    },
    search() {
      console.log(111);
    },
    fileChange(e) {
      console.log(e);
      this.addStep = 2;
    },
  },
};
</script>
